<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节点</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}

		#son{
			width: 100px;
			height: 100px;
			background: blue url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript">
		window.onload = function  () {
			son = document.getElementById("son");

			// son.style.backgroundColor="green";

			// son.parentNode.parentNode.style.backgroundColor="blue";
			// 
			// son.childNodes[5].style.backgroundColor="green";
			// 
			// son.firstChild.style.backgroundColor="green";


			// son.previousSibling.style.backgroundColor="green";
			// 
			xbs = document.getElementById("xbs");

			son1 = document.getElementById("son1");

			btn = document.getElementById('btn');

			you = document.getElementById("you")


			btn.onclick = function  (argument) {
				p = document.createElement("p");

				p.innerHTML="这个是span";

				p.style.backgroundColor="yellow";

				// son1.appendChild(p);
				// 
				// son1.insertBefore(p,you);
				// 
				// son1.removeChild(you);
				
				// son1.replaceChild(p, you);
				// 
				clonexbs = xbs.cloneNode(true);

				console.log(clonexbs);

				// son1.innerHTML=clonexbs;

				son1.appendChild(clonexbs);
			}


		}
	</script>
	
</head>
<body>
	<input type="button" id="btn" value="增加一个节点">
	<div id="box">
		<div id="son22">
			这个是兄弟2
		</div><div id="son">
			<p id="xbs">学并思</p>
			<p>学并思</p>
			<p>学并思</p>
		</div>
		<div id="son1">
			<p id="you">这个是原来就有的</p>
		</div>
		
	</div>
</body>
</html>